<template>
	<view class="task-list flex-column">
		<view class="title-box">任务列表</view>
		<view v-for="item in taskList" :key="item.id" class="task-item flex">
			<image class="task-icon" :src="item.image || '/static/images/no-images.png'" mode="aspectFill" />
			<view class="content-box flex-1">
				<view class="task-name">{{ item.name }}</view>
				<view class="task-integral">+{{ item.point }}积分</view>
			</view>
			<button v-if="item.is_do === 0" class="task-button" hover-class="is-hover" type="primary"
				@click="handleClickToDo(item)">去完成</button>
			<button v-if="item.is_do === 1" class="task-button orange" hover-class="is-hover" type="primary"
				@click="handleClickReceive(item)">领奖励</button>
			<button v-if="item.is_do === 2" class="task-button" hover-class="is-hover" type="primary" disabled>已完成</button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs
	} from "vue";
	import {
		getPlayAppId,
		finishTask,
		receiveTaskAward
	} from "@/api";
	import config from "@/config";

	const props = defineProps({
		// 任务列表
		taskList: {
			type: Array,
			default: () => []
		}
	});

	const emit = defineEmits(["refreshTask"]);

	async function handleClickToDo(item) {
		if (item.id === 3) {
			uni.redirectTo({
				url: `/pages/webView/index?url=${config.scanPage}`
			})
		} else if (item.id === 4) {
			uni.redirectTo({
				url: "/pages/hotel/list"
			})
		} else if (item.id === 5) {
			uni.reLaunch({
				url: "/pages/home/index?activeTab=2"
			})
		} else if (item.id === 6) {
			// 获取陪玩小程序AppId
			const res = await getPlayAppId();
			uni.openEmbeddedMiniProgram({
				appId: res.data.appid,
				path: res.data.page,
				fail: (error) => {
					if (error.errMsg.indexOf("invalid appid") !== -1) {
						uni.showToast({
							title: "无效的AppId",
							icon: "none"
						})
					}
				}
			})
		} else if (item.id === 7) {
			uni.reLaunch({
				url: "/pages/home/index"
			})
		} else {
			uni.showToast({
				title: "正在开发中",
				icon: "none"
			})
			return;
		}
		await finishTask({
			id: item.id
		});
		emit("refreshTask");
	}
	
	// 领取奖励
	async function handleClickReceive(item) {
		await receiveTaskAward({
			id: item.id
		});
		uni.showToast({
			title: "领取成功",
			icon: "none"
		})
		setTimeout(() => {
			emit("refreshTask");
		}, 1000)
	}
</script>

<style scoped lang="scss">
	.task-list {
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		row-gap: 50rpx;
		margin-bottom: 20rpx;

		.title-box {
			font-size: 36rpx;
			font-weight: bold;
		}

		.task-item {
			column-gap: 30rpx;

			.task-icon {
				width: 80rpx;
				height: 80rpx;
			}

			.content-box {
				.task-name {
					font-size: 30rpx;
					font-weight: bold;
				}

				.task-integral {
					font-size: 24rpx;
					color: var(--primary-color);
					margin-top: 8rpx;
				}
			}

			.task-button {
				width: 120rpx;
				height: 60rpx;
				font-size: 24rpx;
				line-height: 60rpx;
				padding: 0;

				&.orange {
					background-color: #FA6500;
				}

				&.info {
					background-color: #F2F4F7;
					color: var(--gray-font-color);
				}
			}
		}
	}
</style>